<template>
  <div class='edit-page-component-container'
       v-if="visible">
    <el-dialog :visible.sync="visible"
               @close="dialogClose"
               :title="dialogStatus==='edit'?'编辑模块':'新增模块'">
      <el-form :model="editPageData"
               label-width="150px"
               class="edit-page-form"
               :rules="rules"
               ref="editPageForm">
        <el-row>
          <el-col :span="11">
            <el-form-item label="模块名称"
                          prop="moudle_name">
              <el-input v-model="editPageData.moudle_name"
                        placeholder="请输入模块名称">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="模块类型"
                          prop="moudle_type">
              <el-select v-model="editPageData.moudle_type"
                         style="width:100%">
                <el-option v-for="item in moduleTypeOptions"
                           :key="item.value"
                           :label="item.name"
                           :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="组件编码"
                          prop="com_no">
              <el-input v-model="editPageData.com_no"
                        placeholder="请输入组件编码">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="路由地址"
                          prop="router">
              <el-input v-model="editPageData.router"
                        placeholder="请输入路由地址">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="宽度"
                          prop="width">
              <el-input v-model="editPageData.width"
                        placeholder="请输入宽度">
              </el-input>

            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="高度"
                          prop="height">
              <el-input v-model="editPageData.height"
                        placeholder="请输入宽度">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="自动刷新时间"
                          prop="flush_time">
              <el-input v-model="editPageData.flush_time"
                        placeholder="请输入自动刷新时间">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="服务端接口地址"
                          prop="server_api">
              <el-input v-model="editPageData.server_api"
                        placeholder="请输入服务端接口地址">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label-width="0"
                          align="center">
              <el-button @click="dialogClose">返回</el-button>
              <el-button type="primary"
                         @click="getAddmoudleData">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { pageComMaintainApi } from '@/services/SystemSetting'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  data () {
    return {
      visible: false,
      editPageData: {},
      moduleTypeOptions: [],
      rules: {
        moudle_name: [
          { required: true, message: '请输入模块名称', trigger: 'blur' }
        ],
        moudle_type: [
          { required: true, message: '请选择模块类型', trigger: 'change' }
        ],
        com_no: [
          { required: true, message: '请输入组件编码', trigger: 'blur' }
        ],
        router: [
          { required: true, message: '请输入路由地址', trigger: 'blur' }
        ],
        width: [
          { required: true, message: '请选择宽度', trigger: 'change' }
        ],
        height: [
          { required: true, message: '请输入高度', trigger: 'blur' }
        ],
        flush_time: [
          { required: true, message: '请输入刷新时间', trigger: 'blur' }
        ],
        server_api: [
          { required: true, message: '请输入服务端接口地址', trigger: 'blur' }
        ],
      },
    }
  },
  props: {
    dialogVisible: Boolean,
    dialogStatus: String,
    dialogData: Object,
    dialogPageType: Number,
  },
  watch: {
    dialogVisible (newval, oldval) {
      this.visible = newval
    },
    dialogData (newval, oldval) {
      this.editPageData = newval
    }
  },
  methods: {
    dialogClose () {
      this.editPageData = {}
      this.$emit('update:dialogVisible', false)
    },
    getAddmoudleData () {
      this.$refs['editPageForm'].validate((valid) => {
        if (valid) {
          if (this.dialogStatus == 'add') {
            pageComMaintainApi.addPageModuleData({
              data: {
                moudle_name: this.editPageData.moudle_name,
                moudle_type: this.editPageData.moudle_type,
                com_no: this.editPageData.com_no,
                router: this.editPageData.router,
                width: this.editPageData.width,
                height: this.editPageData.height,
                flush_time: this.editPageData.flush_time,
                server_api: this.editPageData.server_api,
                page_tmp_id: this.dialogPageType,
              }
            }).then(res => {
              if (res.code == 0) {
                this.$message.success('添加成功!');
                this.$refs['editPageForm'].resetFields();
                this.$emit('backStatus', 'success')
                this.dialogClose();
              } else {
                this.$message.error(res.msg);
              }
            })
          } else {
            pageComMaintainApi.editPageModuleData({
              data: {
                moudle_name: this.editPageData.moudle_name,
                moudle_type: this.editPageData.moudle_type,
                com_no: this.editPageData.com_no,
                router: this.editPageData.router,
                width: this.editPageData.width,
                height: this.editPageData.height,
                flush_time: this.editPageData.flush_time,
                server_api: this.editPageData.server_api,
                id: this.editPageData.page_moudle_id,
              }
            }).then(res => {
              if (res.code == 0) {
                this.$message.success('修改成功!');
                this.$refs['editPageForm'].resetFields();
                this.$emit('backStatus', 'success')
                this.dialogClose();
              } else {
                this.$message.error(res.msg);
              }
            })
          }
        } else {
          return false;
        }
      })
    },
    //获取模块类型
    getModuleType () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'pageMoudleType'
        }
      }).then((res) => {
        this.moduleTypeOptions = res.data.list;
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  created () {
    this.editPageData = this.dialogData
    this.visible = this.dialogVisible
  },
  mounted () {
    this.getModuleType();
  }
}
</script>
<style scoped lang='scss'>
.edit-page-component-container {
  width: 100%;
}
</style>